<template>
	<view>
		<view class="list">
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					期望职位
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="openJob">
					<input class="input-r" type="text" placeholder="请选择三个期望职位" placeholder-class="placeholder-class"
						v-model="dataform.jobName" @input="fillTitle" disabled />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">薪资要求</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="openPicker('salary')">
					<input class="input-r" type="text" placeholder="请选择薪资范围" placeholder-class="placeholder-class"
						v-model="dataform.salary" disabled />
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						工作经验
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="number" placeholder="请输入工作经验" placeholder-class="placeholder-class"
							v-model="dataform.workExperience" />
						<view style="margin-left: 10rpx;">年</view>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					意向城市
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="goServiceArea">
					<input class="input-r" type="text" placeholder="请选择意向城市" placeholder-class="placeholder-class"
						v-model="dataform.hopeCityName" disabled />
				</view>
			</view>
			<!-- 			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					电话
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<input class="input-r" type="text" placeholder="请输入电话" placeholder-class="placeholder-class"
						v-model="dataform.phone" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					姓名
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<input class="input-r" type="text" placeholder="请输入姓名" placeholder-class="placeholder-class"
						v-model="dataform.contacts" />
				</view>
			</view> -->
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					性别
				</view>
				<!-- 	<view class="acea-row row-middle row-right item-r" @click="openPicker('sex')">
					<input class="input-r" type="text" placeholder="请选择" placeholder-class="placeholder-class"
						v-model="sexName" disabled />
				</view> -->
				<view class="acea-row row-middle row-right item-r radio-list">
					<view class="acea-row row-middle radio-item" @click="changSex(1)">
						<image src="../static/images/radio_on.png" mode="" v-if="dataform.sex==1"></image>
						<image src="../static/images/radio_no.png" mode="" v-else></image>
						<view class="">男</view>
					</view>
					<view class="acea-row row-middle radio-item margin-l" @click="changSex(2)">
						<image src="../static/images/radio_on.png" mode="" v-if="dataform.sex==2"></image>
						<image src="../static/images/radio_no.png" mode="" v-else></image>
						<view class="">女</view>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					年龄
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="number" placeholder="请输入年龄" placeholder-class="placeholder-class"
						v-model="dataform.age" />
				</view>
			</view>
			<!-- 	<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					期望行业
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="openPicker('hopeIndustry')">
					<input class="input-r" type="text" placeholder="请选择期望行业" placeholder-class="placeholder-class"
						v-model="industryName" disabled />
				</view>
			</view> -->

			<view class="uni-form-item uni-column">
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						期望行业
					</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right"
						@click="openBusinessFormat('hopeIndustry')">
						<input class="input-r" type="text" placeholder="请选择行业" placeholder-class="placeholder-class"
							v-model="industryName" disabled />
					</view>
				</view>
			</view>
			<manage @confrim="specialityConfirm" :selectParent="true" ref="hopeIndustry" />



			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					标题
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入标题" placeholder-class="placeholder-class"
						v-model="dataform.title" />
				</view>
			</view>
			<!-- 个人标签 -->
			<view class="module">
				<!-- <view class="acea-row row-middle row-between">
					<view class="module-title">
						个人标签
					</view>
					<view class="add-advantage red-sanjiao-r" @click="popupShow=true">
						没找到合适的？选择自定义
					</view>
				</view>
				<view class="acea-row advantage-list">
					<view class="itemBox" v-for="(item,index) in advantages" :key="index">
						<icon type="cancel" color="#000" size="14" @click="closeAdvantages(item,index)" class="close" />
						<view class="item" :class="advantageIds.indexOf(item)!=-1?'item-on':''"
							@click="advantageChecked(item,index)">{{item}}</view>
					</view>
				</view> -->
				<chooseKeywords title="个人标签" :advantages="advantages" type="5" :storeAdvantage="storeAdvantage"
					:advantageIds="advantageIds" @storeAdvantage="val=>(storeAdvantage=val)"
					@advantageIds="val=>(advantageIds=val)" @advantages="val=>(advantages=val)" />

			</view>
			<view class="uni-form-item uni-column">
				<!-- 联系人 -->
				<view class="acea-row row-middle row-between item  ">
					<view class="label label-m">
						联系人
					</view>
					<view class="add-icon" @click="toPage('/pages/releases/addShopContact/addShopContact')">
						<image src="../static/images/add_icon.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<chooseContact :list="contactList" :dataform="dataform" @add="d=>contactList.push(d)"
						@del="toDel" />
				</view>
			</view>
			<!-- 补充详情 -->
			<view class="module">
				<view class="module-title">
					补充详情
				</view>
				<view class="textacea-box">
					<textarea placeholder="请输入补充详情" v-model="dataform.content" :maxlength="maxLength"></textarea>
					<view class="num-text">
						{{dataform.content?dataform.content.length:0}}/{{maxLength}}
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					目前地址
				</view>
				<view class="acea-row row-middle row-right item-r address">
					<input type="text" placeholder="请输入/选择目前住址" v-model="dataform.address">
					<image src="../static/images/location.png" mode="" @click="mapChooseLocation"></image>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<!-- 办公环境照片/视频 -->
				<view class="module">

					<image-comp v-model="dataform.image"></image-comp>
				</view>
			</view>
		</view>

		<view class="submit-btn" @click="handleComfrim">完成</view>
		<u-popup :show="popupShow" mode="center">
			<view style="width: 90vw;" :style="{height: '520rpx'}" class="padding20">
				<view class="acea-row row-middle row-between">
					<view class="title padding20">请输入标签</view>
					<view @click="popupShow = false"><u-icon name="close" size="20"></u-icon></view>
				</view>
				<view class="list">
					<view class="module">
						<view class="module-title">
							输入标签
						</view>
						<view class="textacea-box">
							<textarea placeholder="请输入标签" v-model="supplementText" :maxlength="maxLength"></textarea>
							<view class="num-text">
								{{supplementText.length}}/{{maxLength}}
							</view>
						</view>
					</view>
					<view style="color: red;font-size: 24rpx;margin-bottom:15rpx;">提示：多个标签用逗号分割</view>
					<u-button type="error" text="确定添加" class="mt20" @click="addConfirm"></u-button>
				</view>
			</view>
		</u-popup>
		<u-picker :show="pickerShow" :columns="columns" @cancel="pickerShow=false" @confirm="confirm"
			@change="changeHandler" :keyName="keyName" :defaultIndex="defaultIndex"></u-picker>
		<serviceArea :filtrateArr="filtrateArr" ref="serviceArea" dataType="city" @area="handleArea" />
		<selectJob ref="job" :multiple="true" @change="changeData" />
	</view>
</template>

<script>
	import serviceArea from './area.vue';
	import selectJob from './selectJob.vue';
	import manage from "../components/manage.vue";
	import chooseKeywords from './chooseKeywords.vue'
	import chooseContact from '../components/chooseContact.vue'
	import imageComp from '@/components/imageComp/index.vue'
	import {
		getJobAddApi,
		getIndustryListApi,
		getJobUpdateApi,
	} from '@/api/recruit.js'

	import {
		getUserInfo
	} from '@/api/user.js'
	export default {
		components: {
			serviceArea,
			selectJob,
			manage,
			chooseKeywords,
			chooseContact,
			imageComp
		},
		props: {
			fullStatus: {
				type: String,
				default: '全职'
			},
			item: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				salary: '', //薪资要求
				mobile: '', //电话
				name: '', //姓名
				sex: '', //性别

				title: '', //标题
				houseAddress: '', //目前地址
				advantages: [], //个人标签
				advantageIds: [],
				storeAdvantage: [],
				maxLength: 50,
				supplementText: '', //补充
				dataform: {
					content: '',
					contacts: '',
					phone: '',
					sex: 1,
					age: '', //年龄
				},
				filtrateArr: [{
					type: '城市'
				}],
				regionName: '',
				type: '',
				pickerShow: false,
				keyName: '',
				defaultIndex: [0, 0],
				industryList: [], //行业列表
				industryName: '',
				columns: [],
				contactList: [], //联系人列表
				sexName: null,
				cityInfo: {},
				popupShow: false,
				initHope: 0
			}
		},
		mounted() {
			//获取所属行业列表
			this.getIndustryList();
			if (!this.item.phone) {
				this.userInfo()
			}
			this.dataform.address = this.$address;
			this.$set(this.dataform, 'latitude', this.$location.latitude)
			this.$set(this.dataform, 'longitude', this.$location.longitude)
			this.getBusiness({
				longitude: this.dataform.longitude,
				latitude: this.dataform.latitude,
			})
			getApp().globalData.initContact()
		},

		watch: {
			fullStatus(val) {
				console.log(val)
				if (!val.sex) return
			},
			"item": {
				handler(val) {
					// if (!val.mark) return
					this.dataform = {
						...this.dataform,
						...val
					};
					val.mark && val.mark.replaceAll(',', '/').split('/').forEach((item,
						index) => {
						let ind = this.advantages.indexOf(item);
						if (ind == -1) {
							this.advantages.push(item)
							this.storeAdvantage.push(item)
							this.advantageIds.push(this.advantages.length - 1)
						} else {
							this.advantageIds.push(ind)
							this.storeAdvantage.push(this.advantages[ind])
						}
					})
					this.dataform.salary = this.dataform.salary ? this.dataform.salary.split('-').map(item => item + 'K')
						.join('-') : this
						.dataform.salary;
					if (val.contacts) {
						this.contactList = val.contacts && val.contacts.map(item => {
							return {
								id: item.contactId,
								status: item.open,
								type: item.contactType,
								username: item.contactName,
								phone: item.contactPhone,
								open: item.open,
								were: item.were
							}
						})
						console.log("this.contactList ", this.contactList)
					}

					this.dataform.sex = Number(val.sex)
					this.industryName = val.hopeIndustryName
				},
				deep: true, // 深度监听
				immediate: true // 第一次改变就执行
			}
		},

		methods: {
			specialityConfirm(val) {
				this.dataform.hopeIndustry = val.selectedIds;
				this.industryName = val.name;
			},
			changeData(data) {
				if (data.currentFiltrateConterIndex.length > 3) {
					this.$util.Tips({
						title: "最多选择三个"
					})
					return;
				}
				this.dataform.job = data.currentFiltrateConterIndex.join(',');
				this.dataform.jobName = data.names.join(',')
				if (!this.dataform.title) {
					this.fillTitle();
				}

				this.$forceUpdate();
			},
			//获取用户信息
			async userInfo() {
				try {
					let res = await getUserInfo();
					this.dataform.phone = res.data.phone;
					// this.dataform.sex = res.data.sex;
					this.sexName = res.data.sex == 1 ? '男' : '女'
				} catch (e) {
					//TODO handle the exception
				}
			},
			changSex(sex) {
				this.dataform.sex = sex;
				this.$forceUpdate()
			},
			getBusiness(location, callabck) {
				let that = this;
				getApp().globalData.getBusinessList(location).then(res => {
					if (res.code == 200) {

						that.cityInfo = res.data;
						console.log('res', that.cityInfo)
						callabck && callabck(that.cityInfo);
						// that.dataform.province = res.data.province;
						// that.dataform.city = res.data.city;
						// that.dataform.district = res.data.district;
						// that.dataform.businessName = res.data.businessName;
						// that.dataform.businessCircle = res.data.businessId;
						// that.fillTilte()
					}
				});
			},
			//删除标签
			closeAdvantages(item, index) {
				this.advantages.splice(index, 1)
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
				}
			},
			advantageChecked(index) {
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
				} else {
					this.advantageIds.push(index);
				}
			},
			//去选择意向城市
			goServiceArea() {
				this.$refs.serviceArea.filtrateShow = true;
			},
			//去选择期望职位
			openJob() {
				this.$refs.job.filtrateShow = true;
			},
			//意向城市
			handleArea(areaInfo) {
				console.log('areaInfo', areaInfo)
				if (this.dataform.hopeCity && this.initHope == 0) {
					this.initHope++;
					return;
				}
				this.dataform.hopeCity = areaInfo.citys;
				this.dataform.hopeCityName = areaInfo.cityNames;
				this.dataform.hopeProvince = areaInfo.province;
				this.$forceUpdate();
				this.initHope++;

			},
			//获取职位列表
			async getIndustryList() {
				try {
					let {
						data
					} = await getIndustryListApi();
					this.industryList = data;
				} catch (e) {
					//TODO handle the exception
				}
			},
			//去选择所属行业
			openBusinessFormat(ref) {
				this.$refs[ref].filtrateShow = true
			},
			//打开选择器
			openPicker(params) {
				this.type = params
				switch (params) {
					case 'hopeIndustry':
						this.columns = [this.industryList, this.industryList[0].children];
						this.keyName = 'name';
						this.defaultIndex = [0, 0]
						break;
					case 'salary':
						let arr = []
						for (let i = 0; i < 26; i++) {
							arr[i] = (i + 1) + "K"
						}
						this.columns = [
							arr,
							[]
						];
						this.keyName = '';
						this.defaultIndex = [0, 0]
						break;
					case 'sex':
						this.columns = [
							[{
								name: '男',
								value: 1
							}, {
								name: '女',
								value: 2
							}]
						];
						this.keyName = 'name';
						this.defaultIndex = [this.dataform?.sex - 1] || [0]
						break;
					default:
						this.columns = []
				}
				this.pickerShow = true;
			},
			//picker滚动触发
			changeHandler(e) {
				if (this.type == 'hopeIndustry' && e.columnIndex == 0) {
					this.columns = [this.industryList, this.industryList[e.index].children];
				} else if (this.type == 'salary' && e.columnIndex === 0) {
					let dbArray = [];
					for (let i = 0; i < 7; i++) {
						dbArray[i] = i;
						dbArray[i] += 1;
					}
					let num = e.value[0] ? e.value[0].split('K')[0] : 0;
					for (let i = 0; i < dbArray.length; i++) {
						dbArray[i] += Number(num);
						dbArray[i] += "K"
					}
					// this.columns[1] = dbArray;
					this.$set(this.columns, 1, dbArray)
					this.$forceUpdate()

				}
			},
			//picker点击确认
			confirm(e) {
				if (this.type == 'hopeIndustry') {
					this.dataform[this.type] = e.value[1].id;
					this.industryName = e.value[1].name;
					this.fillTitle()
				} else if (this.type == 'sex') {
					this.dataform[this.type] = e.value[0].value;
					this.sexName = e.value[0].name;
				} else if (this.type == 'salary') {
					this.dataform[this.type] = e.value[0] + (e.value[1] ? ('-' + e.value[1]) : '')
				} else {
					this.dataform[this.type] = e.value[0]
				}
				this.pickerShow = false;
			},
			//自动填充标题
			fillTitle() {
				this.dataform.job ?
					this.dataform.title = '找' + this.dataform.jobName + '工作' :
					null
			},
			//
			addConfirm() {
				this.popupShow = false;
				let that = this;
				uni.showModal({
					title: "是否确认添加",
					showCancel: false,
					confirmText: "确定",
					confirmColor: "#EE212D",
					success(res) {
						if (res.confirm) {
							that.advantages = that.advantages.concat(that.supplementText ? that.supplementText
								.replace(/，/g, ',').split(',') : []);
							that.supplementText = '';
						}
					},
					fail(error) {
						that.supplementText = '';
						that.popupShow = true;
						uni.showToast({
							title: '请重新输入标签', //标题 必填
							icon: 'none',
						});
					}
				})
			},
			async mapChooseLocation() {
				uni.chooseLocation({
					fail: (err) => {
						console.log(err)
					},
					success: (res) => {
						console.log(res)
						this.$set(this.dataform, 'address', res.address)
						this.$set(this.dataform, 'latitude', res.latitude)
						this.$set(this.dataform, 'longitude', res.longitude)
					},
				})
			},

			//跳转页面
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			//表单验证
			handleComfrim() {
				let that = this;
				console.log(this.dataform)
				if (!this.dataform.job || this.dataform.job.split(',').length > 3) return that.$util.Tips({
					title: '请至少选择三个期望职位'
				});
				if (!this.dataform.salary) return that.$util.Tips({
					title: '请输入期望薪资'
				});
				if (!this.dataform.workExperience) return that.$util.Tips({
					title: '请输入工作经验'
				});
				if (!this.dataform.hopeCity) return that.$util.Tips({
					title: '请选择意向城市'
				});
				if (!this.dataform.sex) return that.$util.Tips({
					title: '请选择性别'
				});
				if (!this.dataform.address) return that.$util.Tips({
					title: '请选择地址'
				});
				this.dataform.contacts = that.contactList.map(item => {
					const {
						id,
						type,
						open,
						were
					} = item;
					return {
						contactId: id,
						identity: type,
						open,
						were
					}
				})
				// this.dataform.mark = this.advantageIds.join(',')
				this.dataform.fullStatus = this.fullStatus == '全职' ? 0 : 1;
				this.dataform.salary = this.dataform.salary.replaceAll('K', '')
				this.dataform.mark = this.storeAdvantage.join('/')
				if (this.dataform.id) return this.getJobUpdate()
				this.dataform.province = this.$cityCode[0];
				this.dataform.city = this.$cityCode[1];
				this.dataform.district = this.$cityCode[2]
				if (this.cityInfo.street) {
					this.dataform.street = this.cityInfo.street
				}
				this.getJobAdd()

			},
			async getJobAdd() {
				try {
					let res = await getJobAddApi(this.dataform);
					if (res.code == 200) {
						this.$util.Tips({
							title: '发布成功'
						}, {
							tab: 2,
							url: '/pages/releases/job/job?categoryOn=6'
						})
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			async getJobUpdate() {
				try {
					let res = await getJobUpdateApi(this.dataform);
					this.$util.Tips({
						title: '编辑成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';
</style>